<html>
<head>
<meta charset="UTF-8">
<title>聊天室</title>
<script>
    var socket;
    if (window.WebSocket) {
        console.log("13.2.执行到这一步了吧。。。");
        //socket = new WebSocket("ws://localhost:80/abc/myapp.ws");
        //socket = new WebSocket("wss://localhost/abc/myapp.ws");
        //socket = new WebSocket("wss://192.168.14.246/abc/myapp.ws");
        socket = new WebSocket("wss://localhost:4430/abc/myapp.ws");
        socket.onmessage = function (event) {
            var chat = document.getElementById('chat');
            chat.innerHTML = chat.innerHTML + event.data + "<br />";
        };
    } else {
        alert("Your browser does not support Websockets. (Use Chrome)");
    }

    function send(message) {
        if (!window.WebSocket) {
            return false;
        }
        if (socket.readyState == WebSocket.OPEN) {
            socket.send(message);
        } else {
            alert("The socket is not open.");
        }
        return false;
    }
</script>
<style type="text/css">
html, body {
	width: 100%;
	height: 100%;
}

html, body, ul, ol, dl, li, dt, dd, p, blockquote, fieldset, legend, img,
	form, h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
}

body {
	font: normal 12px/1.5 Arial, Helvetica, 'Bitstream Vera Sans',
		sans-serif;
	background: #c5deea; /* Old browsers */
	background: -moz-linear-gradient(top, #c5deea 0%, #066dab 100%);
	/* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c5deea),
		color-stop(100%, #066dab)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #c5deea 0%, #066dab 100%);
	/* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #c5deea 0%, #066dab 100%);
	/* Opera 11.10+ */
	background: -ms-linear-gradient(top, #c5deea 0%, #066dab 100%);
	/* IE10+ */
	background: linear-gradient(to bottom, #c5deea 0%, #066dab 100%);
	/* W3C */
	height: 90%;
}

.center {
	margin-left: auto;
	margin-right: auto;
	width: 70%;
	background: white;
}

.chatform {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0;
	width: 70%;
}

form {
	width: 100%;
}

label {
	display: inline;
	width: 100px;
}

#msg {
	display: inline;
	width: 100%;
}
</style>
</head>
<body>
	<div class="page">
		<div class="center">
			<h1>Websocket聊天室</h1>
			<div id="chat" style="height: 70%; width: 100%; overflow: scroll;">


			</div>

			<form onsubmit="return false;" class="chatform" action="">
				<label for="msg">按下Enter发送消息：</label> <input type="text" name="message"
					id="msg"
					onkeypress="if(event.keyCode==13) { send(this.form.message.value); this.value='' } " />
			</form>
		</div>
	</div>
</body>
</html>
